import React from 'react';
import {Button} from "antd";
import {Divider} from "antd";
import Dialog from "../dialog/Dialog";
export default class HeaderComponents extends React.Component {
    state = {
        modalVisible: false
    }


    modalShow = (show) => {

        this.setState({
            modalVisible:show
        },()=>{
            console.log(this.state.modalVisible);
        });
    }

    render() {

        const headerStyle = {
            // backgroundColor: 'red',
            color:'red',
            display: 'flex',
            justifyContent: 'space-between',
        }

        return (
            <>
                <div style={headerStyle}>
                    <div>
                        <h2>ToDoList</h2>
                    </div>
                    <div>
                        <Button type="primary" style={{
                            marginTop: '20px',
                        }} onClick={(ev)=>{this.modalShow(true)}}>新增任务</Button>
                    </div>
                </div>
                <Divider/>
                <Dialog show={this.state.modalVisible}/>
            </>
        )
    }

}